import React, { useContext } from 'react';
import classNames from 'classnames';
import { pickBy } from 'lodash/object';
import { isFunction } from 'lodash/lang';
import { numberFormat } from '@/utils/formatterUtil';
import PropTypes from 'prop-types';
import { connect } from 'umi';
import bigDecimal from 'js-big-decimal';

import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';
import { BaseSettingContext } from '@/pages/SalaryManage/constant/BaseSettingContext';
import styles from './index.less';

const isNumber = obj => {
    const type = typeof obj;
    // eslint-disable-next-line no-restricted-globals
    return (type === 'number' || type === 'string') && !isNaN(obj - parseFloat(obj));
};

const NumberFormatter = ({
    value,
    decimalPlaces,
    color,
    negativeColor,
    thousandsSeparator,
    className,
    showTitle,
    decimalSeparator,
    prefix,
    suffix,
    ...otherProps
}) => {
    const formattedValue = isNumber(value)
        ? numberFormat(value, decimalPlaces, thousandsSeparator, decimalSeparator, prefix, suffix)
        : '';
    const spanProps = pickBy(otherProps, v => !isFunction(v));

    return (
        <span
            {...spanProps}
            className={classNames(
                styles.vNumber,
                { [styles.vNumberColor]: color || (negativeColor && value < 0) },
                className
            )}
            title={showTitle ? formattedValue : ''}
        >
            <EmptyPlaceHolder value={formattedValue} />
        </span>
    );
};

NumberFormatter.propTypes = {
    /** 格式化的数值 */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /** 是否需要显示红色 */
    color: PropTypes.bool,

    /** 负数时是否显示红色， color=true时，不管配没配都显示红色 */
    negativeColor: PropTypes.bool,

    /** 保留小数位数 */
    decimalPlaces: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /** 千分位分隔符,传空字符串时就无分隔符 */
    thousandsSeparator: PropTypes.string,

    /** 样式名 */
    className: PropTypes.any,

    /** 是否显示title提示语 */
    showTitle: PropTypes.bool,
    decimalSeparator: PropTypes.string,
    prefix: PropTypes.string,
    suffix: PropTypes.string
};

NumberFormatter.defaultProps = {
    value: null,
    color: false,
    negativeColor: false,
    decimalPlaces: '',
    thousandsSeparator: ',',
    className: '',
    showTitle: false,
    decimalSeparator: '.',
    prefix: '',
    suffix: ''
};

/**
 * 数字格式化控件
 * decimalPlaces来源于后台配置（来源于models中finance.js中的baseSetting.scale）
 * @type {*}
 */
const NumberSettingFormatter = props => {
    const { baseSetting: { scale: decimalPlaces } } = useContext(BaseSettingContext);
    const { value, decimalPlacesFromSetting, dispatch, ...numberOptions } = props;

    return <NumberFormatter decimalPlaces={decimalPlaces} {...numberOptions} value={value} />;
};

/**
 * 百分比格式化控件
 * decimalPlaces来源于后台配置（来源于models中finance.js中的baseSetting.scale）
 * @type {*}
 */
const PercentSettingFormatter = connect(({ finance }) => ({
    decimalPlaces: finance.baseSetting?.scale
}))(props => {
    const { value, decimalPlacesFromSetting, dispatch, ...percentConfig } = props;
    const text = value != null ? bigDecimal.multiply(value, 100) : null;

    return <NumberFormatter {...percentConfig} value={text} suffix="%" />;
});

export {
    NumberFormatter as default,
    NumberSettingFormatter,
    PercentSettingFormatter
};
